Programming Windows Phone 7 : Silverlight and Dynamic Layout (part 1)

SupportedOrientations="Portrait"

SupportedOrientations="PortraitOrLandscape"

SupportedOrientations is a property of PhoneApplicationPage. It’s set to a member of the SupportedPageOrientation enumeration, either Portrait, Landscape, or PortraitOrLandscape.

Recompile. Now when you turn the phone or emulator sideways, the contents of the page shift around accordingly:

The SupportedOrientations property also allows you to restrict your program to Landscape if you need to.

This response to orientation really shows off dynamic layout in Silverlight. Everything has moved around and some elements have changed size. Silverlight originated in WPF and the desktop, so historically it was designed to react to changes in window sizes and aspect ratios. This facility carries well into the phone.

Two of the most important properties in working with dynamic layout are HorizontalAlignment and VerticalAlignment.Using these properties to center text in a Silverlight program was certainly easier than performing calculations based on screen size and text size that XNA required.

On the other hand, if you now needed to stack a bunch of text strings, you would probably find it straightforward in XNA, but not so obvious in Silverlight.

Rest assured that there are ways to organize elements in Silverlight. A whole category of elements called panels exist solely for that purpose. You can even position elements based on pixel coordinates, if that’s your preference.

In the meantime, you can try putting multiple elements into the content grid. Normally a Grid organizes its content into cells identified by row and column, but this program puts nine TextBlock elements in a single-cell Grid to demonstrate the use of HorizontalAlignment and VerticalAlignment in nine different combinations:

Example 1. Silverlight Project: SilverlightCornersAndEdges File: MainPage.xaml

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBlock Text="Top-Left"
               VerticalAlignment="Top"
               HorizontalAlignment="Left" />

    <TextBlock Text="Top-Center"
               VerticalAlignment="Top"
               HorizontalAlignment="Center" />

    <TextBlock Text="Top-Right"
               VerticalAlignment="Top"
               HorizontalAlignment="Right" />

    <TextBlock Text="Center-Left"
               VerticalAlignment="Center"
               HorizontalAlignment="Left" />

    <TextBlock Text="Center"
               VerticalAlignment="Center"
               HorizontalAlignment="Center" />

    <TextBlock Text="Center-Right"
               VerticalAlignment="Center"
               HorizontalAlignment="Right" />

    <TextBlock Text="Bottom-Left"
               VerticalAlignment="Bottom"
               HorizontalAlignment="Left" />

    <TextBlock Text="Bottom-Center"
               VerticalAlignment="Bottom"
               HorizontalAlignment="Center"  />

    <TextBlock Text="Bottom-Right"
               VerticalAlignment="Bottom"
               HorizontalAlignment="Right" />
</Grid>

					  

I’ve set the SupportedOrientations property of MainPage to PortraitOrLandscape. And here it is turned sideways:

Although this screen appears to show all the combinations, the program does not actually show the default settings of the HorizontalAlignment and VerticalAlignment properties. The default settings are enumeration members named Stretch. If you try them out, you’ll see that the TextBlock sits in the upper-left corner, just as with values of Top and Left. But what won’t be so obvious is that the TextBlock occupies the entire interior of the Grid. The TextBlock has a transparent background (and you can’t set an alternative) so it’s a little difficult to tell the difference. 

Obviously the HorizontalAlignment and VerticalAlignment properties are very important in the layout system in Silverlight. So is Margin. Try adding a Margin setting to the first TextBlock in this program:

<TextBlock Text="Top-Left"
           VerticalAlignment="Top"
           HorizontalAlignment="Left"
           Margin="100" />

Now there’s a 100-pixel breathing room between the TextBlock and the left and top edges of the client area. The Margin property is of type Thickness, a structure that has four properties named Left, Top, Right, and Bottom. If you specify only one number in XAML, that’s used for all four sides. You can also specify two numbers like this:

Margin="100 200"

The first applies to the left and right; the second to the top and bottom. With four numbers

Margin="100 200 50 300"

they’re in the order left, top, right, and bottom. Watch out: If the margins are too large, the text or parts of the text will disappear. Silverlight preserves the margins even at the expense of truncating the element.

If you set both HorizontalAlignment and VerticalAlignment to Center, and set Margin to four different numbers, you’ll notice that the text is no longer visually centered in the content area. Silverlight bases the centering on the size of the element including the margins.

TextBlock also has a Padding property:

<TextBlock Text="Top-Left"
           VerticalAlignment="Top"
           HorizontalAlignment="Left"
           Padding="100 200" />

Padding is also of type Thickness, and when used with the TextBlock, Padding is visually indistinguishable from Margin. But they are definitely different: Margin is space on the outside of the TextBlock; Padding is space inside the TextBlock not occupied by the text itself. If you were using TextBlock for touch events, it would respond to touch in the Padding area but not the Margin area.